<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>心率图</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600;700&display=swap"
    rel="stylesheet">
  <link rel="stylesheet" href="../css/心率图.css">

</head>

<body>
  <section class="health-data-page fade-in" v-else>
    <div class="health-container">
      <div class="health-header">
        <h2 class="health-title">老年健康数据监测中心</h2>
        <button class="back-btn" @click="goHome">
          <i class="fas fa-arrow-left"></i>
          返回首页
        </button>
      </div>
      <div class="charts-container"></div>
      <div class="chart trend-chart fade-in" style="animation-delay: 0.1s">
        <div class="chart-title">
          <span>月度健康数据趋势</span>
          <span class="chart-value">综合评分: 84.3</span>
        </div>
        <div class="chart-content">
          <div class="chart-canvas">
            <div class="chart-grid">
              <svg width="100%" height="100%" viewBox="0 0 1000 400">
                <!-- 连接所有数据点的折线 -->
                <path :d="trendPath" class="line-path"></path>

                <!-- 精确位置的数据点 -->
                <circle v-for="(point, idx) in trendPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                  class="data-point"></circle>

                <!-- 网格线 -->
                <line x1="0" y1="80" x2="1000" y2="80" class="grid-line"></line>
                <line x1="0" y1="160" x2="1000" y2="160" class="grid-line"></line>
                <line x1="0" y1="240" x2="1000" y2="240" class="grid-line"></line>
                <line x1="0" y1="320" x2="1000" y2="320" class="grid-line"></line>
              </svg>

              <!-- 数据点标签 -->
              <div v-for="(point, idx) in trendPoints" :key="'label-'+idx" class="point-label"
                :style="point.labelStyle">{{ point.value }}</div>
            </div>
            <div class="y-axis">
              <div class="y-label">630</div>
              <div class="y-label">500</div>
              <div class="y-label">300</div>
              <div class="y-label">100</div>
              <div class="y-label">0</div>
            </div>
            <div class="x-axis">
              <div class="x-label">1月</div>
              <div class="x-label">4月</div>
              <div class="x-label">7月</div>
              <div class="x-label">10月</div>
              <div class="x-label">12月</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 血氧饱和度图表（根据图片精准重建） -->
      <div class="chart oxygen-chart fade-in" style="animation-delay: 0.2s">
        <div class="chart-title">
          <span>每日血氧饱和度变化 (24小时)</span>
          <span class="chart-value">当前: 98%</span>
        </div>
        <div class="chart-content">
          <div class="chart-canvas">
            <div class="chart-grid">
              <svg width="100%" height="100%" viewBox="0 0 1000 400">
                <path :d="oxygenPath" class="line-path"></path>

                <circle v-for="(point, idx) in oxygenPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                  class="data-point"></circle>

                <line x1="0" y1="80" x2="1000" y2="80" class="grid-line"></line>
                <line x1="0" y1="160" x2="1000" y2="160" class="grid-line"></line>
                <line x1="0" y1="240" x2="1000" y2="240" class="grid-line"></line>
                <line x1="0" y1="320" x2="1000" y2="320" class="grid-line"></line>
              </svg>
              <div v-for="(point, idx) in oxygenPoints" :key="'label-'+idx" class="point-label"
                :style="point.labelStyle">{{ point.value }}%</div>
            </div>
            <div class="y-axis">
              <div class="y-label">100%</div>
              <div class="y-label">80%</div>
              <div class="y-label">60%</div>
              <div class="y-label">40%</div>
              <div class="y-label">20%</div>
              <div class="y-label">0%</div>
            </div>
            <div class="x-axis">
              <div class="x-label">00:00</div>
              <div class="x-label">06:00</div>
              <div class="x-label">12:00</div>
              <div class="x-label">18:00</div>
              <div class="x-label">24:00</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 血糖图表（根据图片精准重建） -->
      <div class="chart sugar-chart fade-in" style="animation-delay: 0.3s">
        <div class="chart-title">
          <span>老年人一周血糖变化情况</span>
          <span class="chart-value">今日: 6.8 mmol/L</span>
        </div>
        <div class="chart-content">
          <div class="chart-canvas">
            <div class="chart-grid">
              <svg width="100%" height="100%" viewBox="0 0 1000 400">
                <path :d="sugarPath" class="line-path"></path>

                <circle v-for="(point, idx) in sugarPoints" :key="idx" :cx="point.x" :cy="point.y" r="8"
                  class="data-point"></circle>

                <line x1="0" y1="100" x2="1000" y2="100" class="grid-line"></line>
                <line x1="0" y1="200" x2="1000" y2="200" class="grid-line"></line>
                <line x1="0" y1="300" x2="1000" y2="300" class="grid-line"></line>
              </svg>
              <div v-for="(point, idx) in sugarPoints" :key="'label-'+idx" class="point-label"
                :style="point.labelStyle">{{ point.value }} mmol/L</div>
            </div>
            <div class="y-axis">
              <div class="y-label">30.0</div>
              <div class="y-label">20.0</div>
              <div class="y-label">10.0</div>
              <div class="y-label">0.0</div>
            </div>
            <div class="x-axis">
              <div class="x-label">周一</div>
              <div class="x-label">周二</div>
              <div class="x-label">周三</div>
              <div class="x-label">周四</div>
              <div class="x-label">周五</div>
              <div class="x-label">周六</div>
              <div class="x-label">周日</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    </div>
    </div>
  </section>
  </div>
  <script scr="../js/心率图.js"></script>

</body>

</html>